<template>
	<div>
		<div class="main">作业库</div>
		<!-- 顶部按钮 -->
		<div class="btn_group">
			<div class="header1">
				<div>
					<el-dropdown>
						<button >
							<i class="el-icon-plus"></i>新建作业
						</button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item  @click.native="newjob">手动创建</el-dropdown-item>
							<el-dropdown-item @click.native="database">资料库创建</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<!-- <button >草稿箱</button> -->
					<!-- <button>新建文件夹</button> -->
				</div>
				<!-- <el-input v-model="search" placeholder="请输入内容" suffix-icon="fa fa-search"></el-input> -->
			</div>
			<!-- 搜索框 -->
			<div class="dataSearch">
				<!-- 输入框 -->
				<input type="text" class="ipt_val" placeholder="搜索" v-model="formData.search" />
				<!-- 放大镜 -->
				<input type="button" class="ipt_fdj" @click="getFiles" />
				<!-- 搜索按钮 -->
				<button type="button" class="ipt_search" @click="getFiles">搜索</button>
			</div>
		</div>
		<div style="margin-left: 2%;margin-right: 2%;">
		
		<JobComponent @child1-event="parentEvent" v-if="!show"></JobComponent>	
		<WorkComponent @child2-event="parentEvent1" v-if="show" :phone="phone"></WorkComponent>
		</div>
		
	</div>
</template>

<script>
	import JobComponent from "./JobComponent.vue"
	import WorkComponent from './WorkComponent.vue'
	import {
		HttpManager
	} from "../../../../request/Teacher.js"
	export default {
		components: {
			JobComponent: JobComponent,
			WorkComponent:WorkComponent
		},
		data() {
			return {
				// 表单数据
				formData: {
					// 上级文件夹id，默认全部文件最上层为0
					id: 0,
					// 搜索框内容
					search: '',
					// 是否逆序
					reverse: false
				},
				radio: 1,
				search: "",
				list: [{
					title: "新建作业",
					numberPeople: 52,
					time: "07-28 17:00",
					isshow: false,
				}],
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '全部班级',
				dialogVisible: false,
				value1: '',
				show:false,
				phone:'',
				courseId:window.localStorage.getItem("ClassId"),
			}
		},
		created()
		{
		  // this.getTaskDireGroupByTeacherByCourseId();
		},
		methods: {
			// 获取文件列表
			async getFiles() {
				// 清空被选中文件id列表
				this.checkedList = []
				console.log('获取文件列表')
				// params参数：文件夹id、搜索的值、是否逆序
				// this.files = await axios.get('/files', { params: this.formData })
			},
			correcting() {
				alert(1);
				this.$router.push('/correcting');
			},
			newjob()
			{
				this.$router.push('/Newjob');
			},
			database()
			{
				this.$router.push('/database');
			},
			parentEvent(data)
			{
				// alert(data);
				this.show=!this.show;
				this.phone=data;
			},
			parentEvent1()
			{
				
				this.show=!this.show;
			},
			
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.main {
		width: 100%;
		height: 4.25rem;
		line-height: 4.25rem;
		font-size: 1.25rem;
		font-weight: 18.75;
		/* display: flex;
		justify-content: space-between; */
		color: white;
		text-align: center;
		cursor: pointer;
		background-color: #03d3bd;
	}

	// 顶部按钮组
	.btn_group {
		display: flex;
		justify-content: space-between;
		margin-top:2.5rem;
		margin-bottom: 40px;
		margin-left: 0.625rem;
		margin-right: 1.625rem;


		// 搜索框
		.dataSearch {
			position: relative;
			width: 300px;
			height: 36px;

			// 输入框
			.ipt_val {
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 14px 0 28px;
				outline: none;
				border-color: #d5d7d9;
				width: 170px;
				height: 34px;
				font-size: 14px;
				color: #181e33;
				border: 1px solid #e5e5e5;
				background: #f5f6f7;
				border-radius: 40px;

				&:hover {
					border-color: #03d3bd;
				}

				&:focus {
					border-color: #03d3bd;
				}
			}

			// 放大镜
			.ipt_fdj {
				position: absolute;
				// right: 14px;
				left: 8px;
				top: 8px;
				border: none;
				width: 18px;
				height: 18px;
				background-color: pink;
				background: url(/images/search_ico_new.png);
				background-size: 18px;

				&:hover {
					cursor: pointer;
					background-position: 0 -22px;
				}
			}

			// 搜索按钮
			.ipt_search {
				// width: 40px;
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 22px;
				border: none;
				height: 36px;
				border-radius: 17px;
				background-color: #03d3bd;
				color: #fff;

				&:hover {
					cursor: pointer;
					color: #ffffff;
				}
			}
		}
	}

	.header1 button {
		height: 40px;
		width: 110px;
		outline: none;
		border: inherit;
		color: #3f3f3f;
		background-image: linear-gradient(to right, #03d3bd, #04dac4);
		color: white;
		border-radius: 40px;
		margin-left: 30px;
		cursor: pointer;
	}
	// .header1 button:hover{
	// 	background-image: linear-gradient(to right, #03d3bd, #04dac4);
	// 	color: white;
	// }
	.header1 button i {
		margin-right: 5px;
		font-weight: bold;
	}
	
	.header1 .el-input {
		position: absolute;
		right: 0;
		width: 200px;
		border-radius: 30px;
		margin-right: 50px;
	}
	
	.middle {
		/* border: 1px solid; */
		height: 40px;
		padding-left: 30px;
	}

	.middle .el-input {
		width: 200px;
	}
</style>
